<template>
  <div>
    <span style="font-size: 30px;">屠宰信息</span>&nbsp;
     <el-button style="width: 90px;height: 40px;font-size: 15px;" @click="Sets">设置</el-button>
     <br>
     <el-container>
        <el-aside ><br>
          批次：<span style="font-weight: bold;">{{ form.slaughterNumber }} 
          </span> <br><br>
          到厂时间：<span style="font-weight: bold;">{{ form.slaughterSdate }}
          </span> <br><br>
        </el-aside>
        <el-main>
          到厂均重：<span style="font-weight: bold;">{{ form.slaughterWeitgh }} 公斤
          </span> <br><br>
          屠宰时间：<span style="font-weight: bold;">{{ form.slaughterEdate }} 
          </span> 
        </el-main>      
     </el-container>
  </div>
  <!-- 屠宰 -->
  <el-dialog v-model="dialogForm" title="屠宰信息" width="566">
    <el-form :model="form" label-width="auto">
      <el-form-item label="批次：">
        <el-input v-model="form.slaughterNumber" />
      </el-form-item>
      <el-form-item label="到厂均重(公斤)：">
        <el-input v-model="form.slaughterWeitgh" />
      </el-form-item>
      <el-form-item label="到厂时间：">
        <el-date-picker v-model="form.slaughterSdate" type="date" value-format="YYYY-MM-DD"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="屠宰时间：">
        <el-date-picker v-model="form.slaughterEdate" type="date" value-format="YYYY-MM-DD"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="Create(form.slaughterId)" type="primary">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 相关资质 -->
  <div>
    <span style="font-size: 30px;">相关资质</span>&nbsp;
    <el-upload
      class="avatar-uploader"
      v-model:file-list="form.ZImge"
      action="http://localhost:55799/api/Trace/UpdateFile"
      list-type="picture-card"
      :on-success="AddD"
      :on-remove="handleRemove">
      <el-icon><Plus /></el-icon>
    </el-upload>    
  </div><br>
  <!-- 企业信息 -->
   <div>
    <span style="font-size: 30px;">企业信息</span>&nbsp;
     <el-button style="width: 90px;height: 40px;font-size: 15px;" @click="Setup">设置</el-button>
     <br>
     <el-container>
        <el-aside ><br>
          公司名称：<span style="font-weight: bold;">{{ business.companyName }} 
          </span> <br><br>
          公司地址：<span style="font-weight: bold;">{{ business.businessAddress }}
          </span> <br><br>
        </el-aside>
        <el-main>
          成立时间：<span style="font-weight: bold;">{{ business.businessDate }} 
          </span> <br><br><br> 
        </el-main>
     </el-container>
     <footer>
        公司简介：<span style="font-weight: bold;">{{ business.businessProfile }} 
        </span>
      </footer>
   </div>
   <!-- 企业信息 -->
   <el-dialog v-model="Enterprise" title="企业信息" width="566">
    <el-form :model="form" label-width="auto">
      <el-form-item label="公司名称：">
        <el-input v-model="business.companyName" />
      </el-form-item>
      <el-form-item label="公司地址：">
        <!-- <el-input v-model="business.businessAddress" /> -->
        <el-select v-model="address.provinceId"
      style="width: 140px;float:left;margin: 5px;" @change="GetAllUrban(),GetAlCounty()" >
      <el-option label="请选择省份" value=' ' />
        <el-option v-for="item in Provinced" :key="item.provinceId"
        :label="item.provinceName" :value="item.provinceName" />
      </el-select>
      <el-select v-model="address.urbanId"
      style="width: 140px;float: left;margin: 5px;" @change="GetAlCounty()">
      <el-option label="请选择市" value=' ' />
      <el-option v-for="item in Urban" :key="item.urbanId" :label="item.urbanName" :value="item.urbanName" />
      </el-select>
      <el-select v-model="address.countyId" style="width: 140px;float: left;" >
        <el-option label="请选择县" value=' ' />
        <el-option v-for="item in County" :key="item.countyId" 
        :label="item.countyName" :value="item.countyName" />
      </el-select>
      </el-form-item>
      <el-form-item label="成立时间：">
        <el-date-picker v-model="business.businessDate" type="date" value-format="YYYY-MM-DD"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="公司简介：">
        <el-input v-model="business.businessProfile" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="QCreate(business.businessId)" type="primary">保存</el-button>
      </div>
    </template>
  </el-dialog><br>
  <!-- 企业照片 -->
  <div>
    <span style="font-size: 28px;">企业照片</span>&nbsp;
    <el-upload
      class="avatar-uploader"
      v-model:file-list="business.ImageQ"
      action="http://localhost:55799/api/Trace/UpdateFile"
      list-type="picture-card"
      :on-success="AddQ"
      :on-remove="handleRemove">
      <el-icon><Plus /></el-icon>
    </el-upload>    
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
const route=useRoute()
//屠宰字段
const form=reactive({
  //溯源Id
  traceabilityId:route.query.traceabilityId,
  slaughterId:'0',
  slaughterNumber:'',
  slaughterWeitgh:'',
  slaughterSdate:'',
  slaughterEdate:'',
  ZImge:[]
})

//钩子
onMounted(()=>{
  //屠宰
  Create(form)
  //企业
  QCreate(business)
  //省份
  GetAllProvince()
})

const dialogForm = ref(false)
const Sets=()=>{
  dialogForm.value=true
  console.log(form);
}
//屠宰添加/反填    资质图详情
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Create=(row:any)=>{
  if(row==0){
    axios.post(`Trace/AddSlaughter`,form).then((ret) => {
      console.log(ret.data)
      if(ret.data>0){
        ElMessage.success('添加成功')
        dialogForm.value=false
      }else{
        ElMessage.error('添加失败')
      }
    })
  }else{
    axios.get('Trace/GetSlaughter', {
      params: {
        id:form.traceabilityId
      }
    }).then((ret) => {
      console.log(ret.data)
      form.slaughterId=ret.data[0].slaughterId
      form.slaughterNumber=ret.data[0].slaughterNumber
      form.slaughterWeitgh=ret.data[0].slaughterWeitgh
      form.slaughterSdate=(ret.data[0].slaughterSdate).substring(0,10)
      form.slaughterEdate=(ret.data[0].slaughterEdate).substring(0,10)
      //资质图详情
      ZBackImge()
    })
  }
}
//图片
import { Plus } from '@element-plus/icons-vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleRemove= (uploadFile:any) => {
  console.log(uploadFile)
}
//相关资质
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const AddD=(Imge:any)=>{
  Imge='http://localhost:55799/Imge/'+Imge
  form.ZImge=Imge
  console.log(form);
  axios.post(`Trace/AddPhoto`,{
    photoImge:form.ZImge,
    slaughterId:form.slaughterId
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('资质添加成功')
    }else{
      ElMessage.error('资质添加失败')
    }
  })
}
//资质图详情
const ZBackImge=()=>{
  axios.get('Trace/GetZPhoto', {
    params: {
      id:form.slaughterId
    }
  }).then((ret) => {
    console.log(ret.data)
    form.ZImge = ret.data
  })
}
//企业字段
const business=reactive({
  businessId:'',
  companyName:'',
  businessDate:'',
  businessAddress:'',
  businessProfile:'',
  //溯源Id
  traceabilityId:route.query.traceabilityId,
  ImageQ:[]
})
//地址字段
const address=reactive({
  provinceId:'',
  urbanId:'',
  countyId:''
})
const Enterprise=ref(false)
//企业设置
const Setup=()=>{
  Enterprise.value=true
  console.log(business);
}
//企业添加/显示
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const QCreate=(row:any)=>{
  if(row==0){
    axios.post(`Trace/UpdateBusiness`,{
      businessId:localStorage.getItem('businessId'),
      companyName:business.companyName,
      businessDate:business.businessDate,
      businessAddress:address.provinceId + address.urbanId + address.countyId,
      businessProfile:business.businessProfile
    }).then((ret) => {
      console.log(ret.data)
      if(ret.data>0){
        ElMessage.success('添加成功')
        Enterprise.value=false
      }else{
        ElMessage.error('添加失败')
      }
    })
  }else{
    axios.get('Trace/GetBusiness', {
      params: {
        id:business.traceabilityId
      }
    }).then((ret) => {
      console.log(ret.data)
      business.businessId=ret.data[0].businessId
      business.companyName=ret.data[0].companyName
      business.businessDate=(ret.data[0].businessDate).substring(0,10)
      //省份
      address.provinceId=(ret.data[0].businessAddress).substring(0,3)
      //市
      address.urbanId=(ret.data[0].businessAddress).substring(4,7)
      //县
      address.countyId=(ret.data[0].businessAddress).substring(8,15)
      business.businessAddress=ret.data[0].businessAddress
      business.businessProfile=ret.data[0].businessProfile
      //企业图片详情
      QBackImge()
    })
  }
}
//企业照片
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const AddQ=(ImageQ:any)=>{
  ImageQ='http://localhost:55799/Imge/'+ImageQ
  business.ImageQ=ImageQ
  axios.post(`Trace/AddPhoto`,{
    photoImge:business.ImageQ,
    businessId:business.businessId
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('企业照片添加成功')
    }else{
      ElMessage.error('企业照片添加失败')
    }
  })
}
//企业图片详情
const QBackImge=()=>{
  axios.get('Trace/GetQPhoto', {
    params: {
      id:business.businessId
    }
  }).then((ret) => {
    console.log(ret.data)
    business.ImageQ = ret.data
  })
}
//省份
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Provinced:any=ref([])
const GetAllProvince=()=>{
  axios.get('User/GetAllProvince', {
  }).then((ret) => {
    console.log(ret.data)
    Provinced.value=ret.data.data
  })
}

//市
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Urban:any=ref([])
const GetAllUrban=()=>{
  address.urbanId=' '
  axios.get('User/GetAllUrban', {
    params:{
      id:address.provinceId
    }
  }).then((ret) => {
    console.log(ret.data)
    Urban.value=ret.data.data
  })
}
//县
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const County:any=ref([])
const GetAlCounty=()=>{
  address.countyId=' '
  axios.get('User/GetAlCounty', {
    params:{
      id:address.urbanId
    }
  }).then((ret) => {
    console.log(ret.data)
    County.value=ret.data
  })
}

</script>

<style scoped>

</style>